/*
 * @Author: szx
 * @Date: 2023-03-31 14:01:42
 * @LastEditTime: 2023-04-01 15:59:57
 * @Description:
 * @FilePath: \learn\fullstackopen\bloglist-part5\src\components\Login.jsx
 */
import PropTypes from 'prop-types'
const Login = ({ handleLogin, username, password, handleUsername, handlePassword }) => {
    return (
        <div>
            <h2>Log in to application</h2>
            <form onSubmit={handleLogin}>
                <div >
                    username
                    <input id="username" type="text" value={username} name="Username" onChange={handleUsername} />
                </div>
                <div>
                    password
                    <input id="password" type="password" value={password} name="Password" onChange={handlePassword} />
                </div>
                <button id="login-button" type="submit">login</button>
            </form>
        </div>
    );
};

Login.propTypes = {
    handleLogin: PropTypes.func.isRequired,
    handleUsername: PropTypes.func.isRequired,
    handlePassword: PropTypes.func.isRequired,
    username: PropTypes.string.isRequired,
    password: PropTypes.string.isRequired
};

export default Login;
